<template>
  <div class="container">
    <div class="row">
      <div class="time-box">
        <TimeLine :title="title" :timelineData="timelineData"></TimeLine>
      </div>
      <div class="record-box"></div>
    </div>
  </div>

</template>


<script>
    import TimeLine from '@/components/TimeLine'
    export default {
        name: 'record',
        components: {
            TimeLine
        },
        data() {
            return{
                title: 'MEDICAL RECORD',
                timelineData: [
                    {time: "2018", content: "患者就诊信息"},
                    {time: "2018", content: "患者就诊信息"},
                    {time: "2018", content: "患者就诊信息"},
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: calc(100vh - 84px);
    padding: 10px;
  }
  .row{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    .time-box{
      width: 20%;
      height: 100%;
      box-shadow: 0px 1px 5px 0px #ccc;
      border: 1px solid white;
      border-radius: 3px;
    }
    .record-box{
      width: 79%;
      height: 100%;
      box-shadow: 0px 3px 8px 0px #ccc;
      border: 2px solid white;
      border-radius: 3px;
    }

  }
</style>
